<template>
  <view class="giftCenter-page">
		<view class="giftCenter-content">
			<view class="btns">
				<button class="btn-share" open-type="share"></button>
				<image class="btn-gift" src="/static/common/image/btn-gift.png" mode="widthFix" @click="goNextPage(2)"></image>
				<image class="btn-rule" src="/static/common/image/btn-back.png" mode="widthFix" @click="goNextPage(1)"></image>
			</view>
			<view class="box">
				<!-- 优惠券 -->
				<view class="gift1 gift">
					<image
						class="yhq"
						mode="widthFix"
						src="/static/common/image/gift-100.png"
						@click="clickHandler(1)"
					></image>
					<image
						class="yhq"
						mode="widthFix"
						src="/static/common/image/gift-188.png"
						:style="{'opacity': yhqList.includes('2') ? '1' : '0.5'}"
						@click="clickHandler(yhqList.includes('2') ? 2 : 0)"
					></image>
					<image
						class="yhq"
						mode="widthFix"
						src="/static/common/image/gift-888.png"
						:style="{'opacity': yhqList.includes('3') ? '1' : '0.5'}"
						@click="clickHandler(yhqList.includes('3') ? 3 : 0)"
					></image>
					<!-- <view v-if="yhqList.length">
						<block v-for="(item,index) in yhqList" :key="index">
							<image
								class="yhq"
								mode="widthFix"
								:src="item.url == 1 ? '/static/common/image/gift-100.png' : item.url == 2 ? '/static/common/image/gift-188.png' : '/static/common/image/gift-888.png'"
								@click="clickHandler(item.url)"
							></image>
						</block>
					</view> -->
				</view>
				<!-- 礼盒 -->
				<view class="gift2 gift">
					<view v-if="shiwu">
						<image
							class="shiwu"
							mode="widthFix"
							src="https://cdc-file.risechina.com/img/2022/1/1641875807423.png"
							@click="setInfo"
						></image>
					</view>
				</view>
				<!-- 表情包 -->
				<view class="gift3 gift">
					<view v-if="bqbList.length">
						<block v-for="(item,index) in bqbList" :key="index">
							<image
								class="bqb"
								mode="widthFix"
								:src="item.url"
								@click="savePoster(item.url)"
							></image>
						</block>
					</view>
				</view>
			</view>
		</view>
		<!-- 中奖部分 -->
		<view class="gift-content" v-if="hasAddress">
			<!-- 填写地址 -->
			<view class="gift4 gift">
				<image class="bg" src="/static/common/image/bgaddress.png" mode="widthFix"></image>
				<image class="btn-again" src="/static/common/image/btn-to-get.png" mode="widthFix" @click="addressSave"></image>
				<view class="user-info">
					<u-field
						class="form-name form-username"
						v-model="formData.name"
						label-width="0"
						maxlength="10"
						:clearable="false"
						:border-bottom="false"
					>
					</u-field>
					<u-field
						class="form-name form-mobile"
						v-model="formData.mobile"
						style="margin-top:100rpx"
						label-width="0"
						maxlength="20"
						:clearable="false"
						:border-bottom="false"
					>
					</u-field>
					<u-field
						class="form-name form-address"
						v-model="formData.address"
						label-width="0"
						maxlength="22"
						type="textarea"
						:clearable="false"
						:border-bottom="false"
						:auto-height="false"
					>
					</u-field>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import userMixins from "@/mixins/userMixins";
export default {
  data() {
    return {
			hasAddress: false,
			yhqList: [],
			shiwu: false,
			bqbList: [],
			formData: {
				name: '',
        address: '',
        mobile: ''
			}
    };
  },
	mixins: [userMixins],
  onLoad() {
		this.init();
  },
  methods: {
		async init(){
			let res = await this.$u.api.TASAKIBOOKAPI.getPrizes({
				openid: this.vuex_wechatInfo.openId,
			})
			// res = {
			// 	status: 200,
			// 	data: [
			// 		{
			// 			type: 0,
			// 			url: 'https://cdc-file.risechina.com/img/2022/1/1641280797229.png'
			// 		},
			// 		{
			// 			type: 0,
			// 			url: 'https://cdc-file.risechina.com/img/2022/1/1641280847042.png'
			// 		},
			// 		{
			// 			type: 0,
			// 			url: 'https://cdc-file.risechina.com/img/2022/1/1641280847042.png'
			// 		},
			// 		{
			// 			type: 0,
			// 			url: 'https://cdc-file.risechina.com/img/2022/1/1641280847042.png'
			// 		},
				
			// 		{
			// 			type: 1,
			// 			url: '1'
			// 		},
			// 		// {
			// 		// 	type: 1,
			// 		// 	url: '2'
			// 		// },
			// 		// {
			// 		// 	type: 1,
			// 		// 	url: '3'
			// 		// },
			// 		{
			// 			type: 2,
			// 			url: ''
			// 		},
			// 	]
			// }
			if (res.status === 200) {
				res.data.forEach(item => {
					if (item.type === 0) {
						this.bqbList.push(item);
					} else if (item.type === 1) {
						this.yhqList.push(item.url)
					} else if (item.type === 2) {
						this.shiwu = true;
					}
				})
			}
		},
		goNextPage(type) {
			if (type === 1) {
				wx.navigateBack({
					delta: 1
				})
			} else {
				uni.navigateTo({ url: '/pages/giftCenter/index' });
			}
		},
		savePoster(url) {
			console.log(url,'url')
			wx.showLoading({
        title: '保存图片中',
      })
      let fileName = new Date().valueOf();
			let that = this;
			uni.downloadFile({
				url,
        filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.jpg',
				success(res) {
          console.log(res, 'downloadFile res')
					if (res.statusCode === 200) {
            console.log(res.tempFilePath,'tempFilePath')
						uni.saveImageToPhotosAlbum({
							filePath: res.filePath,
							success () {
								wx.hideLoading();
								uni.showToast({
									title: '保存相册成功',
									duration: 3000,
									icon: 'success'
								});
							},
							fail() {
								wx.hideLoading();
								that.getPermission()
							}
						})
					} else {
						wx.hideLoading();
						uni.showToast({
							title: '表情保存失败',
							duration: 3000,
							icon: 'error'
						});
					}
				},
				fail() {
					reject(new Error(`downloadFile:fail ${img}`))
				}
			})
		},
		clickHandler(type) {
			if(!type) return;
			let path = '';
			switch(type) {
				case 1: {
					path = 'pages/usercenter/promotion/promotion_detail?id=14111030&alias=13nn92bih&type=promocard&sign=e022b7b9baa71e8f4a98cccd1e2c59ca&shopAutoEnter=1';
					break;
				}
				case 2: {
					path = 'pages/usercenter/promotion/promotion_detail?type=promocard&id=14111040&alias=ujb4of1&sign=9ec6e2a1afede52df97a9b8de7070f43&shopAutoEnter=1';
					break;
				}
				case 3: {
					path = 'pages/usercenter/promotion/promotion_detail?id=14111043&alias=hfhxxyqo&type=promocard&sign=578cfa008906ad3628cc6af69e22255b&shopAutoEnter=1';
					break;
				}
			}
			console.log(path,'path')
			wx.navigateToMiniProgram(
				{
					appId: 'wx048c0c5f9b55ca48',
					path
				}
			)
			// console.log('剪切板', url)
			// wx.showModal({
			// 	title: '提示', //提示的标题,
			// 	content: '优惠码已复制到剪切板，是否立刻前往商城', //提示的内容,
			// 	showCancel: true, //是否显示取消按钮,
			// 	cancelText: '取消', //取消按钮的文字，默认为取消，最多 4 个字符,
			// 	success: res => {
			// 		if (res.confirm) {
			// 			wx.setClipboardData({
			// 				data: url,  //复制的内容
			// 				success(){
								
			// 				}
			// 			})
			// 		}
			// 	}
			// });
		},
		setInfo() {
			if (!this.vuex_userInfo.is_send) {
				this.hasAddress = true
				this.formData.name = this.vuex_userInfo.sj_name || ''
				this.formData.address = this.vuex_userInfo.sj_address || ''
				this.formData.mobile = this.vuex_userInfo.sj_mobile || ''
			} else {
				uni.showToast({
					title: '已经发货咯～',
					duration: 3000,
					icon: 'error'
				});
			}
    },
		async addressSave() {
      let errorMsg;
			if (!this.formData.name) {
				errorMsg = '请填写姓名'
			} else if (!this.formData.mobile) {
				errorMsg = '请填写手机号'
      } else if(!this.formData.address) {
        errorMsg = '请填写地址'
      } else if (!/^1\d{10}$/.test(this.formData.mobile)) {
        errorMsg = '请填写正确手机号'
      }
			if (errorMsg) {
				uni.showToast({
					title: errorMsg,
					duration: 3000,
					icon: 'none'
				});
			} else {
				let res = await this.$u.api.TASAKIBOOKAPI.setAddress({
          openid: this.vuex_wechatInfo.openId,
					...this.formData
        })
				if(res.status === 200) {
					this.$u.vuex("vuex_userInfo.sj_address", this.formData.address);
					this.$u.vuex("vuex_userInfo.sj_mobile", this.formData.mobile);
					this.$u.vuex("vuex_userInfo.sj_name", this.formData.name);
					uni.showToast({
						title: '申领成功',
						duration: 2000,
						icon: 'success'
					});
					this.hasAddress = false;
				}
			}
    },
		// 打开权限面板
    getPermission() {
			wx.showModal({
				title: '提示', //提示的标题,
				content: '为了保存表情图片，请打开【添加到相册】权限', //提示的内容,
				showCancel: true, //是否显示取消按钮,
				cancelText: '取消', //取消按钮的文字，默认为取消，最多 4 个字符,
				success: res => {
					if (res.confirm) {
						// openSetting 是需要事件驱动的，保证它的同步性。
						wx.openSetting({
							success(res) {
								console.log('打开了')
							},
							fail(res) {
							}
						})
					}
				}
			});
    }
	}
};
</script>

<style lang="scss" scoped>
	.giftCenter-page {
		width: 100vw;
		height: 100vh;
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f4313f;
		.giftCenter-content {
			position: relative;
			width: 750rpx;
			height: 1650rpx;
			background: url('/static/common/image/giftListbg.png') no-repeat center center;
			background-size: 100% 100%;
			.btns {
				position: absolute;
				right: 20rpx;
				top: 200rpx;
				display: flex;
				flex-flow: column;
				justify-content: center;
				align-items: center;
				z-index: 1111;
				.btn-share {
					width: 69rpx;
					height: 73rpx;
					background-color: transparent;
					border-radius: 0;
					background: url('/static/common/image/btn-share.png') no-repeat center center;
					background-size: 100%;
					&::after {
						border: none;
					}
				}
				.btn-gift {
					margin-top: 21rpx;
					width: 69rpx;
				}
				.btn-rule {
					margin-top: 21rpx;
					width: 69rpx;
				}
			}
			.box {
				position: absolute;
				top: 430rpx;
				left: 180rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-flow: column;
				.gift {
					width: 410rpx;
					// overflow: hidden;
				}
				.gift1 {
					height: 350rpx;
					display: flex;
					flex-flow: column;
					justify-content: center;
					align-items: center;
					.yhq {
						width: 410rpx;
					}
				}
				.gift2 {
					margin-top: 49rpx;
					height: 312rpx;
					.shiwu {
						width: 490rpx;
					}
				}
				.gift3 {
					margin-top: 45rpx;
					height: 227rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					align-items: center;
					.bqb {
						width: 100rpx;
						border-radius: 50%;
						margin: 0 15rpx 15rpx 0;
					}
				}
			}
		}
		.gift-content {
			position: absolute;
			top: 381rpx;
			left: 126rpx;
			.gift {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-flow: column;
			}
			.gift4 {
				position: relative;
				.bg {
					width: 500rpx;
					z-index: 2;
				}
				.btn-again {
					margin-top: 60rpx;
					width: 278rpx;
					z-index: 2;
				}
				.user-info {
					z-index: 3;
					.form-name {
						outline: none;
						border: none;
					}
				}
			}
		}
	}
	::v-deep {
	input {
		font-size: 24rpx!important;
		color: #d4bf97;
		font-weight: 500;
	}
	textarea {
		font-size: 24rpx!important;
		color: #d4bf97;
		font-weight: 500;
		line-height: 1.5;
	}
	.form-username {
		.u-field {
			width: 330rpx;
			position: absolute;
			top: 119rpx;
			left: 100rpx;
		}
	}
	.form-address {
		.u-field {
			width: 460rpx;
			position: absolute;
			top: 300rpx;
			left: 30rpx;
		}
	}
	.form-mobile {
		.u-field {
			width: 330rpx;
			position: absolute;
			top: 186rpx;
			left: 100rpx;
		}
	}
}
</style>
